<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<!-- /.box-header -->
			<div class="box-body">
				<div style="padding-bottom: 5px;">
					<a onclick="fnClickAddRow();" href="javascript:void(0);"
						class="btn btn-primary " data-toggle="modal"
						data-target="#myModal">新增资源分区</a>
				</div>
				<table id="example1" class="table table-bordered table-hover"
					style="font-size: 12px;">
					<thead>
						<tr>
							<th>id</th>
							<th>Namespace</th>
							<th>Cpu Limits</th>
							<th>Memory Limits</th>
							<th>Service Limits</th>
							<th>Pods Limit</th>
							<th>PV Limit</th>
						</tr>
					</thead>
				</table>
			</div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
	<!-- /.col -->
</div>
<!-- /.row -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">新增资源分区</h4>
			</div>
			<div class="modal-body">
				<!-- Horizontal Form -->
		          <div class="box box-info" style="margin-bottom:0px;">
		            <!-- form start -->
		            <form class="form-horizontal">
		              <div class="box-body">
		                <div class="form-group">
		                  <label for="namespace" class="col-sm-2 control-label">Namespace</label>
		
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="namespace" >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="cpu-limits" class="col-sm-2 control-label">Cpu Limits</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="cpu-limits"  >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="memory-limits" class="col-sm-2 control-label">Memory Limits</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="memory-limits"  >
		                  </div>
		                </div>
		                <div class="form-group">
		                  <label for="pods-limits" class="col-sm-2 control-label">Pods Limit</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="pods-limits"  >
		                  </div>
		                </div>
		                 <div class="form-group">
		                  <label for="rc-limits" class="col-sm-2 control-label">RC Limit</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="rc-limits"  >
		                  </div>
		                </div>
		                 <div class="form-group">
		                  <label for="pv-limits" class="col-sm-2 control-label">PV Limit</label>
		                  <div class="col-sm-10">
		                    <input type="text" class="form-control" id="pv-limits"  >
		                  </div>
		                </div>
		              </div>
		              <!-- /.box-body -->
		            </form>
		          </div>
		          <!-- /.box -->
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">
					关<span style="padding-left: 12px" />闭
				</button>
				<button type="button" class="btn btn-primary">
					保<span style="padding-left: 12px" />存
				</button>
			</div>
		</div>
	</div>
</div>


<script type="text/javascript">
	// To make Pace works on Ajax calls
	$(document).ajaxStart(function() { Pace.restart(); });
    $('#example1').DataTable({
        "ajax":"/respartionlist/1",
        "columns": [
        			{ "data": "id" },
        			{ "data": "namespace" },
        			{ "data": "cpuLimit" },
        			{ "data": "memoryLimit" },
        			{ "data": "serviceLimit" },
        			{ "data": "podLimit" },
        			{ "data": "pvLimit" }
        		],
       		"buttons": [
       		          {
       		              text: 'Reload',
       		              action: function ( e, dt, node, config ) {
       		                  dt.ajax.reload();
       		              }
       		          }
       		      ]
    });
</script>
